<div class="inmodal">
    <div class="modal-header">
        <h4 class="modal-title">{{operation | translate}}(ID:{{datasource.id}})</h4>
    </div>
    <div class="modal-body">
        <form role="form" name="form_datasource" novalidate class="form-horizontal">
            <div class="form-group"><label class="col-sm-2 control-label">{{'SETTING.NAME' | translate}}</label>
                <div class="col-sm-10"><input ng-model="datasource.name" type="text" name="datasourcename" class="form-control" required="">
                    <div class="m-t-xs" ng-show="form_datasource.datasourcename.$invalid && form_datasource.datasourcename.$dirty">
                        <small class="text-danger" ng-show="form_datasource.datasourcename.$error.required">{{'SETTING.INPUT_NAME' | translate}}</small>
                    </div>
                </div>
            </div>
            <div class="hr-line-dashed"></div>
            <div class="form-group">
                <label class="col-sm-2 control-label">{{'GATEWAY.GATEWAY' | translate}}</label>
                <div class="col-sm-10">
                    <ui-select ng-model="datasource.gateway.id" name="datasource.gateway_id" theme="bootstrap" required>
                        <ui-select-match allow-clear="false" placeholder="{{'COMMON.PLACEHOLDER' | translate}}">{{$select.selected.name}}</ui-select-match>
                        <ui-select-choices repeat="gateway.id as gateway in gateways | filter: $select.search">
                            <div ng-bind-html="gateway.name | highlight: $select.search"></div>
                        </ui-select-choices>
                    </ui-select>
                    <div class="m-t-xs" ng-show="form_datasource.datasource.gateway_id.$invalid && form_datasource.datasource.gateway_id.$dirty">
                        <small class="text-danger" ng-show="form_datasource.datasource.gateway_id.$error.required">{{'GATEWAY.SELECT_GATEWAY' | translate}}</small>
                    </div>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-2 control-label">{{'DATA_SOURCE.PROTOCOL' | translate}}</label>
                <div class="col-sm-10">
                    <ui-select ng-model="datasource.protocol" name="datasource.protocol" theme="bootstrap" required>
                        <ui-select-match allow-clear="false" placeholder="{{'COMMON.PLACEHOLDER' | translate}}">{{$select.selected.name}}</ui-select-match>
                        <ui-select-choices repeat="protocol.code as protocol in protocols | filter: $select.search">
                            <div ng-bind-html="protocol.name | highlight: $select.search"></div>
                        </ui-select-choices>
                    </ui-select>
                    <div class="m-t-xs" ng-show="form_datasource.datasource.protocol.$invalid && form_datasource.datasource.protocol.$dirty">
                        <small class="text-danger" ng-show="form_datasource.datasource.protocol.$error.required">{{'DATA_SOURCE.INPUT_PROTOCOL' | translate}}</small>
                    </div>
                </div>
            </div>
            <div class="form-group"><label class="col-sm-2 control-label">{{'DATA_SOURCE.CONNECTION' | translate}}</label>
                <div class="col-sm-10"><textarea ng-disabled="disable" uib-tooltip='Connection data in JSON. Modbus TCP Example: {"host":"10.111.212.88", "port":502, "interval_in_seconds":60}' rows="3" ng-model="datasource.connection" type="text" name="datasourceconnection" class="form-control" required=""></textarea>
                    <div class="m-t-xs" ng-show="form_datasource.datasourceconnection.$invalid && form_datasource.datasourceconnection.$dirty">
                        <small class="text-danger" ng-show="form_datasource.datasourceconnection.$error.required">{{'DATA_SOURCE.INPUT_CONNECTION' | translate}}</small>
                    </div>
                </div>
            </div>
            <div class="form-group"><label class="col-sm-2 control-label">{{'SETTING.DESCRIPTION' | translate}} ({{'SETTING.OPTIONAL' | translate}})</label>
                <div class="col-sm-10"><input ng-model="datasource.description" type="text" name="datasourcedescription" class="form-control" >
                    <div class="m-t-xs" ng-show="form_datasource.datasourcedescription.$invalid && form_datasource.datasourceprotocol.$dirty">
                        <small class="text-danger" ng-show="form_datasource.datasourcdescription.$error.required">{{'SETTING.INPUT_DESCRIPTION' | translate}}</small>
                    </div>
                </div>
              </div>
        </form>
    </div>
    <div class="modal-footer">
        <button type="button" class="btn btn-white" ng-click="cancel()">{{'SETTING.CANCEL' | translate}}</button>
        <button type="button" ng-disabled="form_datasource.$invalid" class="btn btn-primary" ng-click="ok()">{{'SETTING.SAVE' | translate}}</button>
    </div>
</div>
